<? function hexLighter($hex,$factor = 30) 
    { 
    $new_hex = ''; 
     
    $base['R'] = hexdec($hex{0}.$hex{1}); 
    $base['G'] = hexdec($hex{2}.$hex{3}); 
    $base['B'] = hexdec($hex{4}.$hex{5}); 
     
    foreach ($base as $k => $v) 
        { 
        $amount = 255 - $v; 
        $amount = $amount / 100; 
        $amount = round($amount * $factor); 
        $new_decimal = $v + $amount; 
     
        $new_hex_component = dechex($new_decimal); 
        if(strlen($new_hex_component) < 2) 
            { $new_hex_component = "0".$new_hex_component; } 
        $new_hex .= $new_hex_component; 
        } 
         
    return $new_hex;     
    }  ?>

/***************************************\

			General Structure
				
\***************************************/

#header, #header-block,
#middle, #middle-block,
#footer, #footer-block {
	width: 100%;
	display: block;
	overflow: hidden;
}
#header-block {
	min-height: 80px;
}
#middle {
	padding-bottom: 60px;
}
#menu {
	float: left;
	width: 200px;
}
#content {
	min-width: 700px;
	margin-left: 20px;
	float: left;
}


/***************************************\
										
				Header					
										
\***************************************/

#header #title-bar{
	display: block;
	margin:20px;
	font-size: 30px;
	color:inherit;
}
#header #title-bar .logo{
	float:left;
	width:40px;
	height:40px;
	margin-right:20px;
	background-image:url('/img/icons/icons.png');
}
#header #title-bar .name{
	font-weight: 700;
	padding-top:10px;
	float:left;
}
#header #user-bar {
	vertical-align: bottom;
	margin:10px;
	margin-top:30px;
	margin-right:20px;
	font-size:14px;
	color: #EEE;
	height: 40px;
}
#header #user-bar a {
	opacity: 0.7;
	color: #FFF;
} 
#header #user-bar a:hover {
	opacity: 1.0;
} 
#header #user-bar .username{
	font-weight: bold;
}
#header #user-bar .sep{
	opacity: 0.7;
	margin-left:20px;
	margin-right:20px;
	font-size:16px;
}
#header .logout{
	color: #FFF;
	padding-top:7px;
}
#header { background: #<?=$centre['backgroundColour']?>; text-decoration: none; color: #FFF; }


/***************************************\

				Middle
				
\***************************************/

#middle 		{ background: #FFF; }


/***************************************\

				Menu

\***************************************/

#menu {
	background: #EEE;
	margin-bottom:10px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#menu ul{
	padding: 0px;
	margin: 0px;
}
#menu > ul{
	margin-top:10px;
	top: 0px;
}
#menu ul:nth-child(2){
	margin-top:40px;
}
#menu ul > ul {
	background: #FFF;
}
#menu a {
	font-size:16px;
	color: inherit;
	text-decoration:none;
}
#menu li {
	margin-left:20px;
	padding-top: 7px;
	/*margin-left:30px;*/
	list-style:none;
	height: 33px;
	position:relative;
}
#menu div.icon {
	position:relative;
	top: 3px;
	/*left:-30px;*/
	display: inline-block; *display: inline; zoom: 1;
}
#menu li > div.icon:first-child {
	margin-right:10px;
}

#menu a:hover { color: #<?=hexLighter($centre['backgroundColour'],30)?>; }
#menu a.selected {
	color: #<?=$centre['backgroundColour']?>;
	font-weight:700;
}
#menu a.selected:hover {
	color: #<?=$centre['backgroundColour']?>;
	font-weight:700;
}
#menu a {
	transition: 		color .1s;
	-moz-transition: 	color .1s; /* Firefox 4 */
	-webkit-transition: color .1s; /* Safari and Chrome */
	-o-transition: 		color .1s; /* Opera */
}

#menu div.icon.close			{ float: right; margin-right:10px; }

#menu div.icon 							{ background-color: #333333; }
#menu a:hover div.icon					{ background-color: #<?=hexLighter($centre['backgroundColour'],30)?>; }
#menu a.selected div.icon 				{ background-color: #<?=$centre['backgroundColour']?>; }
#menu a div.icon {
	transition: 		background-color .1s;
	-moz-transition: 	background-color .1s; /* Firefox 4 */
	-webkit-transition: background-color .1s; /* Safari and Chrome */
	-o-transition: 		background-color .1s; /* Opera */
}

#menu ul > ul div.icon 					{ background: none; }
#menu ul > ul a:hover div.icon,
#menu ul > ul a.selected div.icon { background: none; }

#menu .toggleMenuItem {
	cursor: pointer;
	cursor: hand;
}

/***************************************\

				Footer
				
\***************************************/

#footer {
	background-color: #EEE;
	vertical-align: middle;
	clear: both;
}
#footer .info{
	float:right;
	margin-top:40px;
	margin-bottom:40px;
	margin-right:20px;
}
#footer .system{
	float:left;
	margin-top:40px;
	margin-left:20px;
}
#footer a {
	color: inherit;
}
#footer .logo {
	vertical-align: middle;
	display: inline-block;
	width:100px;
	height:40px;
	background-image:url('/img/icons/icons.png');
}

















/*
	Jquery Action headings and crap
*/
#content .ui-widget{
	font-size: inherit;
	font-family: inherit;
}
#content .ui-widget-content {
	padding: 20px;
	background: #EEE;
}
#content .ui-corner-all, #content .ui-corner-top, #content .ui-corner-right, #content .ui-corner-tr{
	border-radius: 0px;
}
#content .ui-state-active, #content .ui-widget-content .ui-state-active, #content .ui-widget-header .ui-state-active{
	border: none;
}
#content .ui-state-default, #content .ui-widget-content .ui-state-default, #content .ui-widget-header .ui-state-default{
	border: none;	
}
#content h3.sectionHeading{
	padding: 40px;
	padding-top:10px;
	padding-bottom:10px;
	margin-bottom: 0px;
	margin-top: 0px;
	color: #EEE;
	line-height: 40px;
	background: #333333;
	position: relative;
	top: 0px;
}

#content h3.sectionHeading:hover{
	opacity: 0.8;
}

#content div.sectionBody{
	border-radius: 0px;
	border: none;
}




























/*
	Leif's Custom widget div, which is a simple information box that can
	be used for news, tournament, match items on the pages.
*/
/*#content div.widget-title-left { width:20px; display: inline-block; *display: inline; zoom: 1; vertical-align:middle; }
#content div.half div.widget-title-centre { width:220px; display: inline-block; *display: inline; zoom: 1; vertical-align:middle; margin-right:-4px;}
#content div.full div.widget-title-centre { width:580px; display: inline-block; *display: inline; zoom: 1; vertical-align:middle; margin-right:-4px;}
#content div.threefourth div.widget-title-centre { width:400px; display: inline-block; *display: inline; zoom: 1; vertical-align:middle; margin-right:-0px;}
#content div.fourth div.widget-title-centre { width:40px; display: inline-block; *display: inline; zoom: 1; vertical-align:middle; margin-right:-0px;}
#content div.widget-title-right { width:20px; overflow: hidden; display: inline-block; *display: inline; zoom: 1; vertical-align:middle; margin-right:-0px; }
#content div.widget-title-right.icon { margin-left: 20px; margin-right: 20px; position:relative; top:-2px; }
#content div.widget-title-left.icon { margin-left: 20px; margin-right: 20px; position:relative; top:-2px;}*/



/***************************************
****************************************
****************************************
		TMS specific Icons

		see main.css for generic
		icons that are used on both
		sites.

****************************************
****************************************
***************************************/

#menu div.icon.dashboard 		{ background-position: -100px -480px; }
#menu div.icon.events 			{ background-position: -100px -280px; }
#menu div.icon.venues 			{ background-position: -100px -320px; }
#menu div.icon.sports 			{ background-position: -100px -540px; }
#menu div.icon.announcements 	{ background-position: -100px -600px; }
#menu div.icon.tickets 			{ background-position: -100px -340px; }
#menu div.icon.usersgroups 		{ background-position: -100px -400px; }
#menu div.icon.settings 		{ background-position: -100px -500px; }
#menu div.icon.homepage 		{ background-position: -100px -260px; }
#menu div.icon.account 			{ background-position: -100px -380px; }
#menu div.icon.logout 			{ background-position: -100px -440px; }
#menu div.icon.close 			{ background-position: -220px -460px; }

#header #title-bar .logo 		{ background-position: -560px  -60px; }
#footer .logo 					{ background-position: -380px  -20px; }












/***************************************
****************************************
****************************************
		Widget Specific Styles
****************************************
****************************************
***************************************/

#venuemap {
	width: 500px !important;
	height: 200px !important;
	display: none;
}

#mapcontainer {
	width: 500px;
	height: 200px;
	margin: 20px auto;
	display: none;
}

#content td, #content th {
	padding:10px;
	text-align:left;
}
















/***************************************
****************************************
****************************************
			DataTable CSS
****************************************
****************************************
***************************************/

#content button.DTTT_button, #content div.DTTT_button, #content a.DTTT_button {
	text-decoration: none;
	background: #eee;
	border: 1px solid #ccc;
	font-weight: bold;
	box-shadow: 0px 1px 0px #ccc;
	font-size: inherit;
	color: #444;
}
#content button.DTTT_disabled, #content div.DTTT_disabled, #content a.DTTT_disabled {
	color: #aaa !important;
	border: 1px solid #d8d8d8 !important;
	background: #fff !important;
}

#content table.dataTable {
	box-shadow: 0px 0px 1px #000;
	margin-bottom:20px;
}

#content table.dataTable thead th {
	border-bottom: 1px solid #ccc;
}

#content table.dataTable tr.even                            { background-color: #ffffff; }
#content table.dataTable tr.odd                             { background-color: #f8f8f8; }
#content table.dataTable tr.DTTT_selected.even              { background-color: #e8e8ff; }
#content table.dataTable tr.DTTT_selected.odd               { background-color: #dfdff8; }

#content table.dataTable tr.even td.sorting_1               { background-color: #e8e8e8; }
#content table.dataTable tr.odd  td.sorting_1               { background-color: #dfdfdf; }
#content table.dataTable tr.DTTT_selected.even td.sorting_1 { background-color: #cfcfe8; }
#content table.dataTable tr.DTTT_selected.odd  td.sorting_1 { background-color: #c8c8df; }

body .DTED_Lightbox_Content{
	border: 1px solid #000 !important;
	border-radius:0px !important;
}
body .DTED_Lightbox_Content button{
	border-radius: 0px !important;
}

.message {
	margin-top: 20px;
}















/***************************************
****************************************
****************************************
		Full Calendar CSS custom
****************************************
****************************************
***************************************/

/*#content .fc-state-default .fc-button-effect span {
	border-width: 0px;
	border-style: none;
	border-color: none;
	background: #eee;
}
#content .fc-state-default, .fc-state-default .fc-button-inner {
	border-color: #CCC;
	box-shadow: 0px 1px 0px #CCC;
}
#content .fc-event {
	text-decoration: none;
}*/
















/***************************************
****************************************
****************************************
			Time Picker
****************************************
****************************************
***************************************/
/*.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
.ui-timepicker-div dl { text-align: left; }
.ui-timepicker-div dl dt { height: 25px; margin-bottom: -25px; }
.ui-timepicker-div dl dd { margin: 0 10px 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }

.ui-timepicker-rtl{ direction: rtl; }
.ui-timepicker-rtl dl { text-align: right; }
.ui-timepicker-rtl dl dd { margin: 0 65px 10px 10px; }

body .ui-timepicker-div {
	background: #FFF;
	color: #000;
	font-size: 14px;
	font-family: sans-serif;
}

body .ui-widget-content {
	border: 1px solid #444;
	background: #fff;
}

body .ui-state-default,body .ui-widget-content .ui-state-default,body .ui-widget-header .ui-state-default{
	color: #444;
	background: #ddd;
	border: 1px solid #aaa;
}
body .ui-widget-header{
	border: 1px solid #444;
	background: #555;
}

body .ui-datepicker th{
	color: #000;
	font-size: 14px;
}
body .ui-datepicker td{
	font-size: 14px;
}

body .ui-datepicker .ui-datepicker-title{
	font-size: 14px;
}
input.colorpickerinput {
	font-size:14px;
	text-shadow:0px 0px 4px #000000;
	color:#FFF;
}*/

#tournamentSelect {
	max-height: 100px;
	overflow: auto;
}













/***************************************
****************************************
****************************************
		Page Specific Styling
****************************************
****************************************
***************************************/
/*#content .page-calendar input[type="checkbox"] { height:20px; width: 140px; }
#content .page-calendar input[type="select"] { height:20px; width: 140px; clear: right;}
#content .page-calendar input:after{ padding-left: 33px;  }
#content .page-calendar .filter-tournament:after{ content: 'Tournament'; }
#content .page-calendar .filter-venue:after{ content: 'Venue'; }
#content .page-calendar .filter-sport:after{ content: 'Sport'; }*/
